<template>
	<view class="hint-module">
		<!--初始化加载-->
		<view class=" init-loading" v-if="status == 'init-loading'">
			<image src="/static/hint/loading.gif" mode="widthFix" />
			<view>数据正在加载</view>
		</view>
		<!--数据加载中-->
		<view class="in-the-load" v-if="status == 'loading'">
			<image src="/static/hint/loading.gif" mode="widthFix" />
			<view>{{loadingText}}</view>
		</view>
		<!--加载无数据-->
		<view class="hint-loadingComplete" v-if="status == 'loadingComplete'"><view>{{loadingCompleteText}}</view></view>
		<!--无数据-->
		<view class="hint-noData" v-if="status == 'noData'">
			<image src="/static/hint/noData.png" mode="widthFix">
		 <view >{{ noDataText }}</view> 
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			status: 'none' //不显示任何提示
		};
	},
	props: {
		loadingCompleteText: {
			type: String,
			default: '我是有底线的'
		},
		loadingText:{
			type: String,
			default: '加载中'
		},
		noDataText: {
			type: String,
			default: '暂无数据'
		}
	},
	mounted() {},
	methods: {
		init() {
			this.status = 'none';
		},
		getStatus() {
			if (this.status == 'loadingComplete' || this.status == 'noData'|| this.status == 'none') {
				return false;
			}
			return true;
		},
		// 提示类型
		setStatus(status) {
			this.status = status;
		}
	}
};
</script>

<style lang="scss">
.hint-module {
	@extend .flex-space-between-center;
	justify-content: center;
	padding:10rpx $sm-interval;
}
.init-loading {
	padding: 50upx 0px 50upx;
	image {
		width: 100upx;
		margin: auto;
		display: block;
		margin: 5 + $sm-interval auto $sm-interval;
		animation: rotate360 1.5s linear infinite;
	}
	view {
		letter-spacing: 4upx;
		color: $text-color-six;
	}
}
.in-the-load {
	@extend .flex-space-between-center;
	line-height: 60upx;
	padding: 5+$sm-interval 0px;
	color: $text-color-six;
	image {
		width: 60upx;
		vertical-align: middle;
		display: inline-block;
		margin: 0upx 20upx 0px 0;
		animation: rotate360 1.5s linear infinite;
	}
}
.hint-noData {
	padding: 20% 0%;
	color: $text-color-nine;
	text-align: center;
	width: 100%;
	image {
		width: 50%;
		margin: auto;
	}
	text {
		color: $text-color-nine;
		font-size: 100upx;
	}
	view {
		margin-top: $sm-interval;
	}
}
.hint-loadingComplete {
	color: $text-color-six;
	font-size: $font-size-base;
	padding: 10upx 0px;
}
</style>
